<template>
	<view>
		<zmm-watermark :watermark="userStore.watermark" v-if="userStore.watermark"></zmm-watermark>
		<view class="content detail">
			<!--拜访日志信息-->
			<view class="detail-item">
				<uni-section title="拜访日志信息" type="line"></uni-section>
				<view class="detail-content">
					<view class="detail-text">
						商户池ID：<text>{{info.clueId}}</text>
						<text v-if="checkPermi(['zhouyz:salesmanClue:query'])" class="detail-text-copy" @click="showClue(info.clueId)">查看</text>
					</view>
					<view class="detail-text">
						跟进用户：<text>{{info.followUserName}}</text>
					</view>
					<view class="detail-text">
						跟进前状态：<text>{{arrText(salesmanClueFollowLevelList, info.oldLevel)}}</text>
					</view>
					<view class="detail-text">
						跟进后状态：<text>{{arrText(salesmanClueFollowLevelList, info.newLevel)}}</text>
					</view>
					<view class="detail-text">跟进类型：<uni-tag size="small" :text="arrText(salesmanClueFollowStatusList, info.followType)"></uni-tag></view>
					<view class="detail-text">
						跟进内容：<text>{{info.content}}</text>
						<text class="detail-text-copy" @click.stop="copyText(info.content)">复制</text>
					</view>
					<view class="main-flex detail-text detail-flex-start">
						跟进图片：
						<view class="detail-text_r detail-text-banners main-flex main-flex-item detail-flex-wrap">
							<up-image
								v-for="item in imgsList"
								:key="item"
								class="detail-text-banner"
								width="120rpx"
								height="120rpx"
								@click.stop="previewImg(item, imgsList)"
								:src="item"
								:lazy-load="true"></up-image>
						</view>
					</view>
					<view class="detail-text">创建者：<text>{{info.createName}}</text></view>
					<view class="detail-text">跟进时间：<text>{{info.createTime}}</text></view>
					<view class="detail-text">更新者：<text>{{info.updateName}}</text></view>
					<view class="detail-text">更新时间：<text>{{info.updateTime}}</text></view>
				</view>
			</view>
			<!--地图位置-->
			<!-- <view class="detail-item" v-show="info.lat">
				<uni-section title="地图位置" type="line"></uni-section>
				<view class="detail-content">
					<map
						:latitude="info.lat"
						:longitude="info.lng"
						:markers="markers"
						style="width: 100%; height: 300px;">
					</map>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { computed, onMounted, ref } from 'vue';
import { tab, auth, modal } from "@/plugins"
import { getTitle } from "@/utils/getter"
import { checkPermi, checkRole, checkOnlyPermi, checkOnlyRole } from "@/utils/permission"
import { copyText, arrText, previewImg } from '@/utils/ty.js';
import { salesmanClueFollowDetail } from "@/api/erp_api/sale"
import { salesmanClueFollowLevelList, salesmanClueFollowStatusList } from '@/utils/config.js'
import useUserStore from '@/store/modules/user'

	const userStore = useUserStore()
	onLoad(async (option) => {
		if (option.id) {
			id.value = option.id
			getDetail()
		}
	})
	
	// 数据查询
	const id = ref('')
	const info = ref({})
	const markers = ref([])
	const isLoading = ref(false)
	
	const getDetail = () => {
		const params = {
			id: id.value
		}
		isLoading.value = true
		uni.showLoading({
			title: '数据加载中...'
		})
		salesmanClueFollowDetail(params).then(res => {
			info.value = res.data || {}
			// markers.value.push({
			// 	id: res.data.id,
			// 	latitude: res.data.lat,
			// 	longitude: res.data.lng,
			// 	iconPath: '/static/images/locaton.png',
			// 	width: 64,
			// 	height: 64
			// })
			isLoading.value = false
			uni.hideLoading()
    }).catch(() => {
			isLoading.value = false
			uni.hideLoading()
		})
	}
	// 跟进图片
	const imgsList = computed(() => {
		return info.value.image ? info.value.image.split(',').filter(item => item) : []
	})
	const showClue = (id) => {
		uni.navigateTo({
			url: `/pages/sale/salesmanClueDetail?id=${id}`
		})
	}
</script>

<style scoped lang="scss">
	.detail-text-banners {
		margin-left: -10rpx;
	}
	.detail-text-banner {
		margin: 0 10rpx 10rpx;
	}
</style>
